<template>
   <view>
      <view class="content">
         <view class="body">
            <view class="date">
               <text>{{ date }}</text>
               <text style="display: flex;align-items: flex-start;font-weight: normal;font-size: 14px;word-spacing: 2px;">{{ wea }}&nbsp;{{ tem }}℃</text>
               <u-gap height="16px" bgColor="#f5f5f5" style="width: 1px;"></u-gap>
               <text>{{ week }}</text>
            </view>
            <view class="banner"></view>
            <view class="panel">
               <u-grid :col="4" align="center">
                  <u-grid-item v-for="item in items" :key="item.text" @click="goItem(item)">
                     <view class="icon_wrap">
                        <image :src="item.src"></image>
                     </view>
                     <text style="color: #888888;font-size: 12px;">{{item.text}}</text>
                  </u-grid-item>
               </u-grid>
            </view>
            <view class="panel">
               <view style="background-color: #f5f5f5;padding: 10px;display: flex;align-items: center;">
                  <text style="flex: 1;font-size: 16px;font-weight: bold;">今日课程：</text>
                  <view style="margin-right: 5px;display: flex;align-items: center;" @click="goMore()">
                     <text style="margin-right: 5px;color: #888888;">更多</text>
                     <u-icon name="arrow-right" size="14" color="#888888"></u-icon>
                  </view>
               </view>
               <view class="panel_body">
                  <view v-if="plans.length != 0">
                     <view class="panel_content" v-if="$store.getters.term">
                        <view class="item" v-for="(item, i) in plans" :key="i">
                           <view class="item_wrap">
                              <view class="item_index">
                                 <view>{{ i + 1 }}</view>
                                 <view>{{ item.timeLabel }}</view>
                              </view>
                              <view class="item_content">
                                 <view class="item_content_title">
                                    <text>{{ item.subject }}</text>
                                 </view>
                                 <view class="item_content_label">
                                    <text style="padding-right: 10px;">{{item.teacher}}</text>
                                    <text>{{ item.position }}</text>
                                 </view>
                              </view>
                           </view>
                        </view>
                     </view>
                     <u-empty v-else icon="/static/no_set.png" text="请先设置当前学期开始时间">
                        <view class="button" @click="show = true">设置时间</view>
                     </u-empty>
                  </view>
                  <u-empty v-else marginTop="30px" icon="/static/tab1/icon_course_yd.png" 
                  text="今天没课，出去运动一下吧(*╹▽╹*)"></u-empty>
               </view>
            </view>
         </view>
      </view>

      <u-datetime-picker :show="show" v-model="time" mode="date" title="设置第一周开始时间"
      @cancel="show = false" @confirm="setTime"></u-datetime-picker>
   </view>
</template>

<script>
import common from '@/common'
import data from '@/common/data'
import moment from '@/common/moment'
import {
   getCourseList
} from '@/api/course'
import {
   courseTime
} from '@/utils/constants'
export default {
   data() {
      return {
         list2: [],
         textArr: [],
         items: [],
         plans: [],
         tem: '',
         wea: '',
         show: false,
         time: new Date().getTime()
      }
   },
   computed: {
      bgColor() {
         const arr = []
         this.plans.forEach(item => {
            arr.push(common.color[Math.floor(Math.random() * common.color.length)])
         })
         return arr
      },
      date() {
         return common.moment(new Date()).format('MM月DD日')
      },
      week() {
         return common.week(new Date().getDay())
      },
   },
   created() {
      this.list2 = data.list2
      const menus = data.items.slice(0, 7)
      menus.push({
         src: '/static/menus/all.png',
         text: '更多',
         bgColor: '#0277bd',
         url: '/pages/tab1/menus/menus',
         isLink: true
      })
      this.items = menus
      uni.request({
      url: 'https://v0.yiketianqi.com/free/day',
      data: {
         appid: '82215874',
         appsecret: 'SBnY1QEV'
      },
      method: 'GET',
      success: ({ data, statusCode, header }) => {
         this.tem = data.tem
         this.wea = data.wea
      },
      fail: (error) => {}
      })
      if(this.$store.getters.term) {
         this.time = this.$store.getters.term
         this.getCourseData()
      }
   },
   methods: {
      toScan() {
         // #ifdef H5
         console.log("硬件不支持")
         uni.showToast({
            icon: 'none',
            title: '硬件不支持',
            position: 'bottom'
         })
         // #endif
         // #ifdef APP
         uni.scanCode({
            autoZoom: true,
            onlyFromCamera: true,
            scanType: ['qrCode', 'barCode'],
            success: (data) => {
               console.log(data.result);
            },
            fail: (msg) => {
               uni.showToast({
                  icon: 'none',
                  title: msg,
                  position: 'bottom'
               })
            }
         })
         // #endif
      },
      goItem(item) {
         if(item.isLink) {
            uni.navigateTo({
               url: item.url
            })
         }else {
            if(item.type == 'scan') {
               this.toScan()
            }
         }
      },
      goMore() {
         uni.navigateTo({
            url: '/pages/menus/course/course'
         })
      },
      setTime(val) {
         this.show = false
         this.time = val.value
         this.getCourseData()
      },
      getCourseData() {
         const params = {}
         params.id = this.$store.getters.id
         params.time = this.time
         getCourseList(params).then(res => {
            this.plans = []
            this.show = false
            this.$store.getters.term || this.$store.dispatch('storeTerm', this.time)
            if(res.code === 200) {
               const arr = res.data.filter(item => {
                  return item.date == moment(new Date()).format('yyyy-MM-DD')
               })
               arr.forEach(item => {
                  item.timeLabel = courseTime[item.time]
                  this.plans.push(item)
               })
            }
         })
      },
   }
}
</script>

<style lang="scss" scoped>
   .navbar-left_text {
      width: 100%;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      
      .week {
         font-size: 12px;
         padding-left: 8px;
      }
   }
   
   .content {
      height: calc(100vh - 60px) !important;
      box-sizing: border-box;

      .body {
         height: calc(100% - var(--status-bar-height));
         background: linear-gradient(to bottom, #0aa679 140px, #f5f5f5 140px);
         background-attachment: scroll;
         padding-top: var(--status-bar-height);
         box-sizing: border-box;
      }

      .date {
         display: flex;
         align-items: center;
         padding: 15px 10px;

         text {
            display: flex;
            align-items: center;
            height: 20px;
            margin-right: 10px;
            color: #ffffff;
            font-size: 18px;
            font-weight: 550;
            letter-spacing: 1px;
         }

         text:last-child {
            display: flex;
            align-items: flex-start;
            margin-left: 10px;
            font-size: 14px;
            font-weight: normal;
            vertical-align: bottom;
         }
      }
      
      .banner {
         width: auto;
         margin: 0 20px 15px;
         height: 140px;
         border-radius: 14px;
         background-image: url('/static/tab1/banner.png');
         background-size: 100% 100%;
         box-shadow: 0 2px 2px rgba($color: #000000, $alpha: .3);
      }
      
      .panel {
         width: 100%;
         margin: 15px 0 0;
         padding-bottom: 10px;
         overflow: hidden;

         &_header {
            // display: flex;
            width: 100%;
            margin: 10px auto;
         }

         &_body {
            width: 100%;
            margin: 10px auto 10px;

            .panel_content {
               width: auto;
               margin: 10px;
               overflow-y: auto;
            }

            .item {
               width: 100%;
               margin: 0 auto;
               border-radius: 8px;
               color: #333;
               z-index: 1;

               &_wrap {
                  position: relative;
                  display: flex;
                  align-items: center;
                  width: auto;
                  padding: 10px 0;
                  /* #ifdef H5 */
                  margin: 0 10px 15px;
                  /* #endif */
                  /* #ifndef H5 */
                  margin: 0 10px;
                  /* #endif */
               }

               &_index {
                  position: relative;
                  display: block;
                  flex: 0 0 36px;
                  margin-right: 20px;
                  border-radius: 8px;
                  color: #333;
                  font-size: 14px;
                  text-align: center;
                  z-index: 99;

                  view:last-child {
                     color: #999;
                  }

                  &::before {
                     content: "";
                     position: absolute;
                     top: 0;
                     left: 17px;
                     height: 100%;
                     transform: translateY(-100%);
                     border: 1px dashed #cccccc;
                     z-index: 0;
                  }

                  &::after {
                     content: "";
                     position: absolute;
                     top: 100%;
                     left: 17px;
                     height: 100%;
                     border: 1px dashed #cccccc;
                     z-index: 0;
                  }
               }

               &_content {
                  width: 100%;
                  padding: 10px 20px;
                  border-width: 2px;
                  border-style: solid;
                  border-radius: 14px;

                  &_title {
                     font-size: 18px;
                     font-weight: bold;
                     line-height: 28px;
                  }

                  &_label {
                     line-height: 20px;
                  }

                  &_desc {
                     line-height: 16px;
                  }
               }

               &:nth-child(1) {

                  .item_index::before {
                     display: none;
                  }
               
                  .item_content {
                     border-color: rgba($color: #F55142, $alpha: .3);
                     background-color: #FCF0F2;
                     color: #F55142;
                  }
               }

               &:nth-child(2) {

                  .item_content {
                     border-color: rgba($color: #5499DE, $alpha: .3);
                     background-color: #E6F3FC;
                     color: #5499DE;
                  }
               }

               &:nth-child(3) {

                  .item_content {
                     border-color: rgba($color: #59BA56, $alpha: .3);
                     background-color: #E6FCE9;
                     color: #59BA56;
                  }
               }

               &:nth-child(4) {
                  .item_content {
                     border-color: rgba($color: #996BE8, $alpha: .3);
                     background-color: #F1EDFC;
                     color: #996BE8;
                  }
               }

               &:nth-child(5) {

                  .item_content {
                     border-color: rgba($color: #F0B52A, $alpha: .3);
                     background-color: #fff5bd;
                     color: #F0B52A;
                  }
               }

               &:last-child {
                  
                  .item_index::after {
                     display: none;
                  }
               }
            }
         }

         .icon_wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            margin-top: 10px;

            image {
               display: block;
               width: 48px;
               height: 48px;
            }
         }
      }
   }

   .button {
      margin-top: 20px;
      padding: 5px 40px;
      background-color: $primary-theme-color;
      border-radius: 15px;
      color: #ffffff;
   }

   /deep/ .u-navbar__content__left--hover {
      opacity: 1;
      color: #fff;
   }
</style>
